click the button to display the width and height of the image
code:
<div>
<h3>return the width/height of an image</h2>
<img id="foto-3" src="../images/4.jpg" alt="holidays" title="holidays photo 4"
width="307" height="198" style="margin: 0 auto;"/>
<div>
<p>click the button to display the width and height of the image</p>
<button onclick="showWidth()">show width and height</button>
<p id="picture4"></p>
<p id="picture5"></p>
</div>
</div>
<script>
function showWidth(){
var x = document.getElementById("foto-3").width;
var y = document.getElementById("foto-3").height;
document.getElementById("picture4").innerHTML = "width: " + x + "px";
document.getElementById("picture5").innerHTML = "height: " + y + "px";
}
</script>
code:
<div>
<h3>add an image element</h3>
<div>
<div id="trial" style=" width: 10vw; height: 10vw;"></div>
<p id="up" style="font-size: 1vw; font-weight: bold;"></p>
<button onclick="getFun()">click here</button><br>
<p id="down" style="color:red;font-size:1vw;font-weight:normal;"></p>
</div>
</div>
<script>
var up = document.getElementById("up");
up.innerHTML = "click on the button to add an image element";
var down = document.getElementById("down");
function getFun(){
var img = document.createElement("img");
img.src = "../images/1.jpg";
document.getElementById("trial").appendChild(img);
img.style.width = "20vw";
img.style.height = "10vw";
down.innerHTML = "image element added.";
}
</script>
add an element to a webpage
<div>
<h3>add an element to a webpage</h3>
<div>
<div id="another_trial" style=" width: 10vw; height: 10vw;"></div>
<p id="above" style="font-size: 1vw; font-weight: bold;"></p>
<button onclick="makeFun()">click here</button><br>
<p id="under" style="color:red;font-size:1vw;font-weight:normal;"></p>
</div>
</div>
<script>
var above = document.getElementById("above");
above.innerHTML = "click on the button to add an image element";
var under = document.getElementById("under");
function makeFun(){
var img = new Image();
img.src = "../images/2.jpg";
document.getElementById("another_trial").appendChild(img);
img.style.width = "20vw";
img.style.height = "10vw";
under.innerHTML = "image element added.";
}
</script>
<div class="grid_C">
<p id="een_A"></p>
<p>The number of images is: <span id="twee_B"><span></p>
<p id="drie_C"></p>
<p id="vier_D"></p>
</div>
<script>
var allImgs = document.getElementsByTagName("img");
document.getElementById("een_A").innerHTML = "total of images in this page: " + allImgs.length + " pictures";
let nummer = document.images.length;
document.getElementById("twee_B").innerHTML = nummer;
var imgCount = document.images.length;
var svgCount = document.getElementsByTagName('svg').length;
var finalCount = imgCount + svgCount;
document.getElementById("drie_C").innerHTML = "total number of pictures: " + finalCount;
function countImages(){
var images = document.getElementsByTagName('IMG');
var count = images.length;
document.getElementById('vier_D').innerHTML= "grand total of pictures: " + count;
}
countImages();
</script>
example: list of all the pictures in the webpage.
code:
<div class="grid_C">
<p id="vijf_E"></p>
<p id="zes_F"></p>
<p id="zeven_G"></p>
<p id="acht_H"></p>
</div>
<script>
var imgTags = document.getElementsByTagName('img');
// Loop through each <img> tag and extract the image file name
for (var i = 0; i < imgTags.length; i++) {
var imgTag = imgTags[i];
var imgSrc = imgTag.src;
console.log(imgSrc);
document.getElementById("vijf_E").innerHTML += imgSrc + "<br>";
}
Array.prototype.map.call(document.images, function (i) { console.log('image', i.src); });
Array.prototype.map.call(document.images, function (i) { document.getElementById("zes_F").innerHTML += 'image: '+ (i.src) + "<br>"; });
const getImages = (el, includeDuplicates = false) => {
const images = [...el.getElementsByTagName('img')].map(img =>
img.getAttribute('src') + "<br>"
);
return includeDuplicates ? images : [...new Set(images)];
};
document.getElementById("zeven_G").innerHTML = getImages(document, true);
document.getElementById("acht_H").innerHTML = getImages(document, false);
</script>
lightbox - a modal image gallery, using CSS and JavaScript
